	$(function(){

		/*掷色子*/
	    var dice = $("#dice");
	    var dianji =$('.go');
	    var num =""
	    // 小人
		var ref;
		var i=0;
		var guijipoints = [];
        var index = 0;
        var jishu =0; //记录点击色子的次数
        var fenshu =0; //记录分数
        var Lefts='';
        var audio2 = document.getElementById('mp4Btn');
        var audio = document.getElementById('mp3Btn');
        audio.volume = 0.1;

        // 函数排队
        // 第一个函数走（色子）
        function fun1(){
        	dianji.css('display','none')
        	$('#main').css('display','block')
   			$(".wrap").append("<div id='dice_mask'></div>");//加遮罩
	        dice.attr("class","dice");//清除上次动画后的点数
	        dice.css('cursor','default');
	        num = Math.floor(Math.random()*6+1);//产生随机数1-6
	        dice.animate({left: '+2px'}, 100,function(){
	            dice.addClass("dice_t");
	        }).delay(200).animate({top:'-2px'},100,function(){
	            dice.removeClass("dice_t").addClass("dice_s");
	        }).delay(200).animate({opacity: 'show'},600,function(){
	            dice.removeClass("dice_s").addClass("dice_e");
	        }).delay(100).animate({left:'-2px',top:'2px'},100,function(){
	            dice.removeClass("dice_e").addClass("dice_"+num);
	            // $("#result").html("您掷得点数是<span>"+num+"</span>");
	            dice.css('cursor','pointer');
	            $("#dice_mask").remove();//移除遮罩
	            $('.correct').css('background','none')
	        });
	         // showSound("images/texiao.mp3");
		}
		 // 第二个函数走（小人）
		function fun2(){
			$('#main').css('display','none')
			clearInterval(ref);
			clearInterval(bser);
			ref = setInterval(function(){
			    consoleLog();
			},100);
			var ps = [
                
                { x: 0, y: 440 }, 
                { x: 200, y:400 },
                { x:380, y:660},
                { x:380, y:660},

              
                { x:500, y:100},
                { x:500, y:120},
                { x:230, y:320},
                { x:230, y:320},

              
                { x:100, y:180},
                { x:120, y:500},
                { x:100, y:350},
                { x:100, y:350},
                
                { x:-10, y:600},
                { x:-300, y:100},
                { x:100, y:180},
                { x:100, y:180},

                { x:-100, y:0},
                { x:100, y:100},
                { x:300, y:150},
                { x:300, y:150},
              	
              	{ x:100, y:200},
                { x:600, y:250},
                { x:300, y:-80},
                { x:200, y:0}
                ];
            guijipoints = CreateBezierPoints(ps, 400);
            var moveobj = $("#move_div");
			// var bser = setInterval(function () {

   //              var p = guijipoints[index];
   //              console.log(p.x);
   //              moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
   //              index++;
   //              if (index >= guijipoints.length) {
   //                   index = 0;
   //              }
   //          }, 1000 / 100);
   //          refs = setTimeout(function(){
			// 	clearInterval(refs);
			// 	clearInterval(bser);
			// 	clearTimeout(ref);
			// },3000);
            // guijipoints.forEach(function (obj, i) {
            //     createDiv(obj.x, obj.y);
            // });
            if(jishu==1){
            	var bser = setInterval(function () {
	                var p = guijipoints[index];
	                moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
	                index++;
	                if (index >= guijipoints.length) {
	                     index = 0;
	                }
	            }, 1000 / 20);
	            refs = setTimeout(function(){
					clearInterval(refs);
					clearInterval(bser);
					clearTimeout(ref);
				},1000);
				$(".topic").delay(2000).animate({height:'19.2213rem'},1000);
				$(".tmbox").delay(2000).fadeIn();
				$(".topic").css('display','block');
				return false ;
            }
             if(jishu==2){
             	var bser = setInterval(function () {
	                var p = guijipoints[index];
	                 if(p.x>100){
	                	$('.dtimg').addClass('fanz');
	                }
	                moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
	                index++;
	                if (index >= guijipoints.length) {
	                     index = 0;
	                }
	            }, 1000 / 30);
	            refs = setTimeout(function(){
					clearInterval(refs);
					clearInterval(bser);
					clearTimeout(ref);
				},3000);
				$('#box').animate({left:'-11.3067rem',top:'-6.6773rem'},2000);
				$(".topic").delay(3100).animate({height:'19.2213rem'},1000);
				$(".tmbox").delay(3100).fadeIn();
				$(".topic").css('display','block');
				return false ;
            }
            if(jishu==3){
             	var bser = setInterval(function () {
	                var p = guijipoints[index];
	                if(p.x<100){
	                	$('.dtimg').removeClass('fanz');
	                }
	                moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
	                index++;
	                if (index >= guijipoints.length) {
	                     index = 0;
	                }
	            }, 1000 / 30);
	            refs = setTimeout(function(){
					clearInterval(refs);
					clearInterval(bser);
					clearTimeout(ref);
				},4000);
				$('#box').animate({left:'0',top:'-6.6773rem'},3000);
				$(".topic").delay(4100).animate({height:'19.2213rem'},1000);
				$(".tmbox").delay(4100).fadeIn();
				$(".topic").css('display','block');
				return false ;
            }
            if(jishu==4){
             	var bser = setInterval(function () {
	                var p = guijipoints[index];
	                moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
	                index++;
	                if (index >= guijipoints.length) {
	                     index = 0;
	                }
	            }, 1000 / 30);
	            refs = setTimeout(function(){
					clearInterval(refs);
					clearInterval(bser);
					clearTimeout(ref);
				},3500);
				$('#box').animate({left:'-11.3067rem',top:'-6.6773rem'},5000);
				$(".topic").delay(3600).animate({height:'19.2213rem'},1000);
				$(".tmbox").delay(3600).fadeIn();
				$(".topic").css('display','block');
				return false ;
            }
            if(jishu==5){
             	var bser = setInterval(function () {
	                var p = guijipoints[index];
	                if(p.x>100){
	                	$('.dtimg').addClass('fanz');
	                }
	                moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
	                index++;
	                if (index >= guijipoints.length) {
	                     index = 0;
	                }
	            }, 5000 / 100);
	            refs = setTimeout(function(){
					clearInterval(refs);
					clearInterval(bser);
					clearTimeout(ref);
				},3300);
				$('#box').animate({left:'-7.3067rem',top:'0'},4000);
				$(".topic").delay(3600).animate({height:'19.2213rem'},1000);
				$(".tmbox").delay(3600).fadeIn();
				$(".topic").css('display','block');

				return false ;
            }
		}
		// 第三个函数走（答题）
		function fun3(){
			$('.topic-li').css('display','none');
			$('.topic-li').eq(jishu-1).css('display','block');
		}
		// 排队时间控制
		dianji.click(function() {
			audio2.play()
			$('.topic-li span').css('backgroundImage','url()');
			jishu++
		    $(":root").delay(0).queue(function(){
		        fun1();
		        $(this).dequeue()
		    });
		    $(":root").delay(2000).queue(function(){
		        fun2();
		        $(this).dequeue()
		    });
		    $(":root").delay(3000).queue(function(){
		        fun3();
		        $(this).dequeue()
		    });

		});
		// 点击答题
		$('.topic-li div').click(function(){
				$(".topic").show().delay(1000).fadeOut();
				$(".tmbox").show().delay(1000).fadeOut();
				$(".topic").animate({height:'0'},1000);
				dianji.css('display','block');
				if($(this).hasClass("correct") == false){
					$('.topic-li span').css('backgroundImage','url()');
					$('.correct span').css('backgroundImage','url()');
					$('.correct span').css({backgroundImage:'url(images/dui.png)',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'});
					$(this).children("span").css({backgroundImage:'url(images/chuo.png)',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'});
				}else{
					fenshu++
					$('.topic-li span').css('backgroundImage','url()');
					$('.correct span').css('backgroundImage','url()');
					$('.jsbox span').html(+fenshu*+'20'+'分');
					$('.jindu').animate({'width':+fenshu*+'20'+-+'5'+'%'});
					$(this).children("span").css({backgroundImage:'url(images/dui.png)',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'});
				}
				if(jishu==5){
					if(fenshu>=3){
						$(".fenshus").attr('src','images/'+'00'+fenshu+'.png'); 
						$('.jieguo').css({'background':'url(images/16.png) no-repeat','background-size':'100%'});
						$(".jieguo").delay(2000).fadeIn();
					}else{
						$('.jieguo').css({'background':'url(images/17.png) no-repeat','background-size':'100%'});
						$(".fenshus").attr('src','images/'+'00'+fenshu+'.png'); 
						$(".jieguo").delay(2000).fadeIn();
					}
				}
			})

	    //音乐播放
	   
	     
		$('.audio_div').click(function(){
			// //防止冒泡
			event.stopPropagation();
			if(audio.paused) //如果当前是暂停状态
			{
			$('.audio_div').css("background","url(images/music_on.png) no-repeat center bottom");
			$('.audio_div').css("background-size","cover");
			audio.play();//播放
			return;
			}
			//当前是播放状态
			$('.audio_div').css("background","url(images/music_off.png) no-repeat center bottom");
			$('.audio_div').css("background-size","cover");
			audio.pause(); //暂停
			
			
		});
		
	
		// 小人
		function consoleLog(){
			i++
			if(i<4){
				$('#box .dtimg').attr('src','images/'+i+'.png');
				$('#move1 img').attr('src','images/'+i+'.png');
			}else{
				i=0
			}
		}
		// 第二屏小人过桥
        $('.click').click(function(){
        	$('.click').css('display','none');
           clearInterval(ref);
			clearInterval(bser);
			ref = setInterval(function(){
			    consoleLog();
			},100);
			var ps = [
                { x: 0, y: 160 }, 
                { x: 300, y:0}, 
                { x:800, y:900 }
                ];
            guijipoints = CreateBezierPoints(ps, 690);
            var moveobj = $("#move1");
			var bser = setInterval(function () {
                var p = guijipoints[index];
                console.log(p.x);
                moveobj.css({ left: p.x/16+'rem', top: p.y/16+'rem' });
                index++;
                if (index >= guijipoints.length) {
                     index = 0;
                }
            }, 1000 / 100);
            refs = setTimeout(function(){
				clearInterval(refs);
				clearInterval(bser);
				clearTimeout(ref);
				$('.begin').css('display','none');
				$('.boxs').css('display','block');
				guijipoints = [];
				index = 0;
			},5000);
            // guijipoints.forEach(function (obj, i) {
            //     createDivs(obj.x, obj.y);
            // });
        });
        // function createDivs(x, y) {

        //     $("#begin").append('<div style="position: absolute; width: 2px; height: 2px; left:' + x/16 + 'rem;top:' + y/16 + 'rem; overflow: hidden; background-color: #FF0000"></div>');
        // }
		// 贝塞尔曲线
        // function createDiv(x, y) {
        //     $("#box").append('<div style="position: absolute; width: 2px; height: 2px; left:' + x/16 + 'rem;top:' + y/16 + 'rem; overflow: hidden; background-color: #FF0000"></div>');
        // }
        //anchorpoints：贝塞尔基点
        //pointsAmount：生成的点数
        function CreateBezierPoints(anchorpoints, pointsAmount) {
            var points = [];
            for (var i = 0; i < pointsAmount; i++) {
                var point = MultiPointBezier(anchorpoints, i / pointsAmount);
                points.push(point);
            }
            return points;
        }
        function MultiPointBezier(points, t){
            var len = points.length;
            var x = 0, y = 0;
            var erxiangshi = function (start, end){
                var cs = 1, bcs = 1;
                while (end > 0) {
                    cs *= start;
                    bcs *= end;
                    start--;
                    end--;
                }
                return (cs / bcs);
            };
            for (var i = 0; i < len; i++) {
                var point = points[i];
                x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
                y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
            }
            return { x: x, y: y };
        }
        // function showSound(audioSrc) {
        //     *因为音效元素是追加的，所以每次生成之前，将原来的删除掉
        //     $("#hint").remove();
        //     *创建audio标签的Jquery对象，然后追加到body进行播放即可
        //     let audioJQ = $("<audio src='" + audioSrc + "' autoplay id='hint'/>");
        //     audioJQ.appendTo("body");
        // }
        // 
        function myPlay(id){
	        
	            play = function(){
	                audio.play();
	                document.removeEventListener("touchstart",play, false);
	            };
	        audio.play();
	        document.addEventListener("WeixinJSBridgeReady", function () {//微信
	            play();
	        }, false);
	        document.addEventListener('YixinJSBridgeReady', function() {//易信
	            play();
	        }, false);
	        document.addEventListener("touchstart",play, false);
	    }
	    myPlay(audio)

	});
	// 监控进度
	window.onload = function() {
		$('#jqmeter-container').jQMeter({
		    goal:'1000',//进度条总长度(指的是进度)，必须的参数
		    raised:'1000',//进度条当前进度，必须的参数
		    width:'80%',//显示的进度条的宽度
		    height:'20px',//显示的进度条的宽度
		    animationSpeed:2000,//进度条动画的时间
		    counterSpeed:3000,//进度条计数的时间
		});
		$('.therm span').on('DOMNodeInserted',function() {
			if($('.therm span').text()=="100%"){
				$('.dyp').css('display','none');
				// $('.begin').css('display','block');
			}
		})
		setTimeout(function(){
			$('.jianjie').css('display','block');
	        $('.jianjie').addClass('bounceInLeft');
	    }, 3000);
		
		$('.jianjie').click(function(){
			var audio = document.getElementById('mp3Btn');
			$('.jianjie').removeClass('bounceInLeft');
			$('.jianjie').addClass('bounceOutLeft');
			 $('.begin').css('display','block');
			 audio.play();
		})

	}
 


